<template>
	<view class="wrap">
		<view>
			<!-- <view class="title">
				<text>发起活动</text>
			</view> -->
			<view class="bg">
				<view class="topbox">
					<view class="inp_box" style="border-bottom: 1rpx solid #E4E4E4; background-color: #fff;box-sizing: border-box;    padding-right: 32rpx;">
						<input :value="reqData.Title" type="text" @input="inputTitle" :placeholder="placeholdertext" placeholder-class="platitle" maxlength="25"/>
						<view class="count">{{ reqData.Title.length }} / {{ maxtitle }}</view>
					</view>
					<view v-if="tabInd == 0 || tabInd == 2" class=" group_textarea">
						<textarea style="width: 100%;height: 80%; font-weight: 400;" :value="reqData.Remark"
							:placeholder="textareatext" placeholder-class="remtext" maxlength="200" @input="inputrem" />
						<view class="count">{{ reqData.Remark.length }} / {{ maxCount }}</view>
					</view>
					<view v-if="tabInd == 0 || tabInd == 2" class="img_list">
						<view class="img_box">
							<view class="img" v-for="(item, i) in imgArr" :key="i" @click="lookimg(item.netPath,i)" >
								<image @click="lookimg(item.netPath,i)" :src="item.tempUrl" mode="aspectFill"></image>
								<view class="icon" @click.stop="delImg(i)">
									<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710154762492571.png" mode="widthFix"></image>
								</view>
							</view>
							<!-- #ifdef MP-WEIXIN -->
							<view class="img addimg" @tap="upload" v-if="imgArr.length < 9">
								<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png" mode="widthFix"></image>
							</view>
							<canvas
								canvas-id="tranCanvas"
								class="tranCanvas"
								:style="{ width:canvasWidth+'px',height: canvasHeight + 'px' }"
							></canvas>
							<!-- #endif -->
							<!-- #ifdef APP-PLUS -->
							<view class="img addimg" @tap="selectImg_APP" v-if="imgArr.length < 9">
								<image src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17104950296621296.png" mode="widthFix"></image>
							</view>
							<canvas
								canvas-id="tranCanvas"
								class="tranCanvas"
								:style="{ width:canvasWidth+'px',height: canvasHeight + 'px' }"
							></canvas>
							<!-- #endif -->
						</view>
					</view>
				</view>
				<view class="bottombox">
					<view class="group" @click="isskill">
						<view class="lab">{{tabInd == 0?'运动项目':tabInd == 1?'私教项目':'教学项目'}}</view>
						<view class="inp_box">
							<input type="text" :value="reqData.PlaceType" disabled placeholder="请选择" />
						</view>
						<view class="icon_box">
							<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
						</view>
					</view>
					<view v-if="tabInd == 0 " class="group" @click="showTime = true">
						<view class="lab">运动时间</view>
						<view class="inp_box">
							<input :value="dateTime" type="text" disabled placeholder="请选择" />
						</view>
						<view class="icon_box">
							<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
						</view>
					</view>
					<view v-if="tabInd == 0 " class="group" @click="showEndTime = true">
						<view class="lab">结束时间</view>
						<view class="inp_box">
							<input :value="endTime" type="text" disabled placeholder="请选择" />
						</view>
						<view class="icon_box">
							<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
						</view>
					</view>
					<!-- <view v-else class="group" @click="showtimetype = true">
						<view class="lab">时间方式</view>
						<view class="inp_box">
							<input :value="reqData.DateRule" type="text" disabled placeholder="请选择" />
						</view>
						<view class="icon_box">
							<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
						</view>
					</view>
					<view class="group" v-if="reqData.DateRule == '时间区间'">
						<view class="lab">{{tabInd == 1?'私教时间':'教学时间'}}</view>
						<view class="inp_box" style="display: flex;justify-content: flex-end;">
							<view style="min-width: 100rpx;margin-top: 10rpx;text-align: center;" @click="showTime = true" :class="dateTime?'':'remtext'">{{dateTime || '请选择'}}</view>
							<text style="line-height: 46rpx;">-</text>
							<view style="min-width: 100rpx;margin-top: 10rpx;text-align: center;" @click="showMaxTime = true" :class="dateTime?'':'remtext'">{{endTime || '请选择'}}</view>
						</view>
					</view> -->
					<view class="group">
						<view class="lab">{{tabInd == 0?'运动场地':tabInd == 1?'私教场地':'教学场地'}}</view>
						<!-- <view @click="nav_to('/pages/ball/ball_site?golfType=' + reqData.PlaceType)" class="inp_box flx ball_space">
								<input v-model="ShopName" type="text" disabled placeholder="请选择" />
							</view> -->
						<view @click="openMap" class="inp_box flx ball_space">
							<input v-model="ShopName" type="text" disabled placeholder="请选择" />
						</view>
						<view class="icon_box">
							<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
						</view>
					</view>
					<!-- <view v-if="tabInd == 0" class="group" @click="showApportion = true">
						<view class="lab">买单方式</view>
						<view class="inp_box">
							<input type="text" :value="reqData.FeeRule" disabled placeholder="请选择" />
						</view>
						<view class="icon_box">
							<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
						</view>
					</view> -->
					<view class="group"  @click="showcost = true">
						<view class="lab">{{'是否免费'}}</view>
						<view class="inp_box">
							<input :value="reqData.FeeRule" type="text" disabled placeholder="请选择" />
						</view>
						<view class="icon_box">
							<uni-icons type="right" size="20" color="#E7E7E7"></uni-icons>
						</view>
					</view>
					<view class="group" v-if="(reqData.FeeRule == '付费' || reqData.FeeRule == '价格区间' || reqData.FeeRule == '现场缴费')">
						<view class="lab">支付费用</view>
						<view v-if="reqData.FeeRule == '付费' || reqData.FeeRule == '现场缴费'" class="inp_box">
							<input v-model="reqData.RegisterFee" type="text" placeholder="请输入金额" maxlength="6" style="margin-top:8rpx;"/>
						</view>
						<view v-else class="inp_box" style="display: flex;justify-content: flex-end;">
							<input v-model="reqData.Commission" type="text" placeholder="最小金额" maxlength="6" style="margin-top:8rpx;border-bottom: 1rpx solid #c2c2c2;width:125rpx;text-align:center;"/>
							<text style="line-height:46rpx;">-</text>
							<input v-model="reqData.Commission_End" type="text" placeholder="最大金额" maxlength="6" style="margin-top:8rpx;width: 125rpx;border-bottom: 1rpx solid #c2c2c2;text-align: center;margin-right: 7rpx;"/>
						</view>
						<!-- <view class="unit">/元</view> -->
						<!-- <text :class="isReadmemoy?'text5':'text6'">区间</text>
						<radio style="transform:scale(0.7)" :checked="isReadmemoy" color="#B98B51" @click="setReadmemoy"></radio> -->
					</view>
					<view class="group" v-if="tabInd != 1">
						<view class="lab">{{tabInd == 2?'招生人数:':'邀请人数:'}}</view>
						<view class="inp_box">
							<input type="number" v-model.number="reqData.PeopleNum" placeholder="请填写人数" maxlength="6"/>
						</view>
					</view>
					<view class="group">
						<view class="lab">联系电话:</view>
						<view class="inp_box">
							<input type="text" v-model="reqData.Phone" placeholder="请填写电话号码" maxlength="11" />
						</view>
					</view>
				</view>
				<view class="createbox">
					<view class="mt30 create_ball_btn">
						<!-- <button class="btn" v-if="!isPhoneNull" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">提交</button> -->
						<view class="btm_tip" @click="setRead">
							<radio style="transform:scale(0.7)" :checked="isRead" color="#B98B51"></radio>
							用户发布时请遵守<text class="c_sed" @click.stop="openPopupTip"> {{'发布须知'}}</text>
						</view>
						<button class="btn" @click="sub">提交</button>
					</view>
				</view>
				

			</view>
			<uni-popup ref="popupTip" type="bottom">
				<view class="tip wap">
					<view class="tit f1 fwb">
						发布须知
					</view>
					<view class="txt">
						<view class="mt20"><text
								class="f3 c2">1.不得发布非法广告：包括但不限于色情推广、漏点画面，销售假冒伪劣和违禁品，利用一些违反广告法的行为推销，违反公序良俗的行为。</text>
						</view>
						<view class="mt20"><text
								class="f3 c2">2.不得仪容仪表不当：包括但不限于裸露上身、大面积裸纹身等，不符合审美能力的一些妆容，带有性暗示的直播内容。</text>
						</view>
						<view class="mt20"><text
								class="f3 c2">3.不得侵犯消费者权利：行为有很多,销售假冒伪劣产品,以次充好强迫消费者购买,销售过期产品。并且不给消费者退费,价格虚高,包括但不限于盗用、复制、直播无转播权的活动现场、录制、直播无版权的视听内容等。</text>
						</view>
						<view class="mt20"><text
								class="f3 c2">4.不得销售违禁品：任何人售卖违禁品会触犯法律的底线，受到法律的制裁。包括但不限于防身刀、激光笔等管制刀具;烟花爆竹、鞭炮等易燃易爆物品;含有色情、暴力、低俗等内容的产品。</text>
						</view>
						<view class="mt20"><text class="f3 c2">5.不得对未成年人有害的行为：未成年人思想还不成熟，易受诱惑。</text></view>
					</view>
					<view class="btn mt20 mb30" @click="closePopupTip">关闭</view>
				</view>
			</uni-popup>
			<!-- 时间选择 -->
			<u-datetime-picker :minDate="minDate" ref="datetimePicker1" :show="showTime" mode="datetime" @cancel="showTime = false" @confirm="setTime($event,'start')" :filter="timeFilter"></u-datetime-picker>
			<u-datetime-picker :minDate="new Date(dateTime).getTime() || minDate" ref="datetimePicker" :show="showEndTime" mode="datetime" @cancel="showEndTime = false" @confirm="setTime($event,'end')" :filter="timeFilter"></u-datetime-picker>
			<!-- 招学员时间类型 -->
			<u-picker :show="showtimetype" immediateChange @confirm="settimetype"  @cancel="showtimetype = false" :columns="timelist"></u-picker>
			<u-datetime-picker :minDate="minDate" ref="datetimeMaxPicker" :show="showMaxTime" mode="datetime" @cancel="showMaxTime = false" @confirm="setMaxTime" :filter="timeFilter"></u-datetime-picker>
			<!-- 运动项目 -->
			<u-picker :show="showmotion" immediateChange @confirm="setmotion" :defaultIndex="[sportdefaultIndex]" @cancel="showmotion = false"
				:columns="motiontype"></u-picker>
			<!-- 费用选择 -->
			<u-picker :show="showcost" immediateChange @confirm="setcost"  @cancel="showcost = false"
				:columns="costtype"></u-picker>
			<!-- 分摊方式 -->
			<u-picker :show="showApportion" immediateChange @confirm="setFeeRule" @cancel="showApportion = false"
				:columns="apportion"></u-picker>
			<!-- 球局类型 -->
			<u-picker :show="showGolfType" immediateChange @confirm="setGolfType" @cancel="showGolfType = false"
				:columns="golftype"></u-picker>

			
		</view>

		<!-- 礼物赠送弹窗 -->
		<uni-popup ref="gift" type="center">
			<view class="popup">
				<image class="popup-bg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1710326674977862.png"
					mode="">
				</image>
				<view class="popup-title">
					<view class="title-text">礼物</view>
				</view>
				<image class="popup-close" @click="$refs['gift'].close()"
					src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/chat/del.png" mode=""></image>
				<scroll-view class="popup-wrap" scroll-y="true" :show-crollbar="true" scroll-with-animation="true">
					<view class="x-list">
						<view v-for="(l, i) in gift_list" :key="i" @click="gift_index = i" class="list-cell"
							:class="{ 'list-active': i == gift_index }">
							<image class="list-icon" :src="l.Icon" mode=""></image>
							<view v-if="i != gift_index" class="list-name"> {{ l.Name }} </view>
							<view class="list-price"> ￥{{ l.Price }} </view>
							<view v-if="i == gift_index" @click="giveGift(l.Name, l.Price)" class="list-btn"> 确定 </view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup>

		<uni-popup ref="sport" type="center">
			<view class="sporttext"
				>运动项目：<text class="maxtag">{{ "(最多选择三个项目)" }}</text></view
			>
			<view class="sportbox">
				<view
				@click="spotype(item.Code, item.checked)"
				class="sport"
				v-for="(item, index) in motiontype"
				:key="index"
				:class="item.checked ? 'text4' : ''"
				>
				{{ item.Code }}
				</view>
			</view>
		</uni-popup>

		<toast id="toast"></toast>
	</view>
</template>

<script>
import toast from '@/pages/ball/components/toast/toast.vue';
import { checkPornography } from "../../common/imgExamine";
export default {
	
	data() {
		return {
			cirID:'',
			ossWatermark:'',
			canvasWidth:0,
      		canvasHeight:0,
			logoImgInfo: {},
			startdate:null,
			enddate:null,
			isReadtime:false,
			isReadmemoy:false,
			isRead: false,
			maxCount: 200,
			maxtitle:25,
			placeholdertext: '',
			textareatext: '',
			Remark: '',
			BarTitle: '发布活动',//标题
			tabInd: 0,
			gift_list: [], //礼物数组
			gift_index: -1, //当前选中礼物
			skitype: 0,
			imgArr: [],
			courtname: '',
			isPhoneNull: false,
			payPrice: 0,
			user: {},
			localList: [],
			// 时间
			minDate: (new Date().getTime()),
			showTime: false,
			showEndTime: false,
			// 分摊
			apportion: [['组局者承担', 'AA制', '男A女免', '女A男免']],
			showApportion: false,
			//运动项目
			motiontype: [],
			showmotion: false,
			//费用类型
			costtype:[['免费','付费','现场缴费']],
			showcost:false,
			//时间类型
			timelist:[['自行协商','时间区间']],
			showtimetype:false,
			showMinTime:false,
			showMaxTime:false,
			showGolfType: false,
			golftype: [],

			ShopName: '', // 滑雪场地

			reward: {
				show: false
			},
			reqData: {
				Phone: '', // 电话
				Commission: null, // 价格
				Images: [], // 图片
				gift: '', // 选中的礼物名字
				Start_Pot: '', // 约拼车出发地点
				Start_Lat: '', // 出发纬度
				Start_Lng: '', // 出发经度
				End_Pot: '',	 // 约拼车目的地地点
				End_Lat: '', //目的地纬度
				End_Lng: '',	//目的地经度
				hasReward: true,  // 有无奖励
				reward: 0,
				ShopID: '',
				Remark: '', // 备注
				Price: 0,
				giftPrice: '',
				ServerDate: '', //起始日期
				ServerTime: '', 
				EndDate:'', //结束日期
				EndTime:'',
				ItemStr: '',
				FeeRule: '',
				PeopleNum: 1,
				IsOpen: '0', // 是否公开,0是公开,1是不公开
				Title: '',
				WomenNum: 0,
				City: '',
				AppointmentType: '',
				Longitude: '',
				Latitude: '',
				Place: '',
				PlaceType: '',
				Commission_End:null, //截止价格
				DateRule:'', //时间类型
				startTime:'',
				IsPayRegisterFee:0,//是否需要付费
				RegisterFee:'', //报名费
			},
			shop: {},
			sportdefaultIndex:0
		};
	},
	components: {
		toast,
	},
	async onLoad(e) {
		this.ossWatermark = this.$ossWatermark
		if(e.id){
			this.cirID = e.id
		}
		if (e.golfType == 0) {
			this.BarTitle = '发布活动';
			this.placeholdertext = '填写您想发布的活动标题'
			this.textareatext = '填写您想发布的活动描述'
			this.tabInd = 0
			this.reqData.AppointmentType = '一起挥'
		}
		if (e.golfType == 1) {
			this.BarTitle = '发布找私教';
			this.placeholdertext = '填写您想发布的找私教标题'
			this.textareatext = '请填写对私教的描述，如对私教的性格、能力、经验、特长、身高、体重、样貌及专业技能等描述'
			this.tabInd = 1;
			this.reqData.AppointmentType = '找私教'
		}
		if (e.golfType == 2) {
			this.BarTitle = '发布招学员';
			this.placeholdertext = '填写您想发布的招学员标题'
			this.textareatext = '请填写对学员的描述，如身高、体重、年龄、性别、样貌及专业知识等描述'
			this.tabInd = 2
			this.reqData.AppointmentType = '招学员'
		}
		uni.setNavigationBarTitle({
			title: this.BarTitle,
			success: function () {
			},
			fail: function (err) {
			}
		});
		this.getGiftList();
		this.getLogo()
		// this.user = uni.getStorageSync('user');
		await this.getUserInfo()
		this.reqData.Phone = this.user.Phone || ''
		this.ShopName = e.title;

		await this.$api.post('/Common/Add_ViewPath', {
			Path: 'ball_add',
			Platform: uni.getStorageSync('platform')
		});
		this.GetDictionary()
		if (this.user.Phone) this.isPhoneNull = true;
		else this.isPhoneNull = false;

		let _this = this;
		uni.$on('site', async (data) => {
			_this.reqData.Place = data.ShopName;
			_this.ShopName = data.ShopName;
			_this.reqData.ShopID = data.ID;
			_this.reqData.RegisterFee = data.Price;
			_this.reqData.Longitude = data.Longitude;
			_this.reqData.Latitude = data.Latitude;

			_this.shop = data;
			let res = await _this.$util.getGeocoder(data.Address);
			this.reqData.City = res.result.address_components.city;
		});


		uni.$on('reward', async (data) => {
			this.reqData.reward = data;
		});
		uni.$on('custom', async (data) => {
			this.Place = data.Place;
			this.ShopName = data.Place;
			this.reqData.ShopID = 0;
			this.reqData.Place = data.Place;
			this.reqData.Longitude = data.Longitude;
			this.reqData.Latitude = data.Latitude;
		});
	},
	onUnload() {
		uni.$off('site');
		uni.$off('reward');
		uni.$off('custom');
	},
	onReady() {
		// 微信小程序需要用此写法
		this.$refs.datetimePicker1.setFormatter(this.formatter);
		this.$refs.datetimePicker.setFormatter(this.formatter);
		this.$refs.datetimeMaxPicker.setFormatter(this.formatter);
		uni.setNavigationBarColor({
			frontColor: '#000000',
			backgroundColor: '#ffffff'
		});
	},
	methods: {
		async getUserInfo(){
			let ID = uni.getStorageSync('user').ID;
			let res = await this.$api.post('User/GetUserInfo', { ID });
			this.user = res.data
		},
		spotype(Code, checked) {
			// this.newlist = []
			let list = this.motiontype;
			let listtrue = []
			const maxNum = 3;
			if (!checked && !this.canChoose) {
				this.$pv.msg("最多选" + maxNum + "个标签");
				return;
			}
			this.newlist = []
			for (let i = 0; i < list.length; i++) {
				list[i].checked =
				list[i].Code == Code ? !list[i].checked : list[i].checked;
				if(list[i].checked){
					listtrue.push(list[i].Code)
				}
			}
			console.log(listtrue);
			this.reqData.PlaceType = listtrue.join(',')
		},
		isskill() {
			this.$refs["sport"].open();
		},
		async GetDictionary(){
			let dic = await this.$api.post('Catalog/GetDictionary', {
				Type: 'SportType'
			});
			
			if (dic.code == 0) {
				this.motiontype = dic.data
				for (let i = 0; i < this.motiontype.length; i++) {
					this.$set(
						this.motiontype[i],
						"checked",
						false
					);
				}
			}
		},
		getLogo() {
			let that = this;
			uni.getImageInfo({
				src: "https://wavestation.oss-cn-shenzhen.aliyuncs.com/upload/1718699178193382.png",
				success: function (res) {
				that.logoImgInfo = res;
				},
				fail: (res) => {},
			});
		},
		lookimg(url, index) {
			// let arr = JSON.parse(url);
			uni.previewImage({
				urls: [url],
				current: index,
			});
		},
		setReadtime(){
			this.isReadtime = !this.isReadtime
		},
		setReadmemoy(){
			this.isReadmemoy = !this.isReadmemoy
		},
		setRead() {
			this.isRead = !this.isRead;
		},
		openPopupTip() {
			this.$refs.popupTip.open();
		},
		closePopupTip() {
			this.$refs.popupTip.close();
		},
		//初始化时间
		// minData
		timeFilter(mode, options) {
			let d = new Date()
			if (mode === 'hour') {
				let mi = d.getMinutes()
				if (mi > 30) 
				return options
			}
			if (mode === 'minute') {
				return ['00', '30']
			}
			return options;
		},
		inputrem(e) {
			const { value, cursor } = e.detail
			let str = this.$util.entitiesToUtf16(value)
			if (str.length > 200) {
				this.reqData.Remark = str.slice(0, 200)
			} else {
				this.reqData.Remark = str
			}

			// this.reqData.Remark
		},
		// 用户自动匹配运动项目
		inputTitle(e) {
			const { value, cursor } = e.detail
			let str = this.$util.entitiesToUtf16(value)
			if (str.length > 25) {
				this.reqData.Title = str.slice(0, 25)
			} else {
				this.reqData.Title = str
			}
			// let sportList = this.motiontype[0]
			// for (let i = 0; i < sportList.length; i++) {
			// 	let spStr = sportList[i]
			// 	if (value != '' && value.includes(spStr)) {
			// 		this.reqData.PlaceType = spStr
			// 		this.sportdefaultIndex = i
			// 		break;
			// 	}
			// }
		},
		//选择地址
		openMap(item) {
			const _this = this
			try {
				uni.chooseLocation({
				// console.log('11111');
					async success(res) {
						console.log('1111');
						console.log(res,'addres');
						let d = await _this.$util.getAddress({ longitude: res.longitude, latitude: res.latitude });
						console.log(d,'d');
						_this.reqData.Latitude = res.latitude
						_this.reqData.Longitude = res.longitude
						_this.reqData.Place = res.name || d.result.address_reference.landmark_l2.title
						_this.ShopName = res.name || d.result.address_reference.landmark_l2.title
					},
					fail(err){
						console.log('111');
						console.log(err,'err');
					},
					complete(){
						console.log('aaa');
					}
				});
			} catch (error) {
				console.log(error,'error');
			}
		},
		//礼物
		giveGift(name, Price) {
			this.reqData.gift = name
			this.reqData.Commission = Price
			this.$refs['gift'].close()
		},
		async getGiftList() {
			let res = await this.$api.post('Friend/GetGift');
			if (res.code == 0) {
				this.gift_list = res.data;
			}

		},
		//选择地址
		chooseLocation() {
			const _this = this
			uni.chooseLocation({
				async success(res) {
					let d = await _this.$util.getAddress({ longitude: res.longitude, latitude: res.latitude });
					_this.reqData.Start_Lat = res.latitude
					_this.reqData.Start_Lng = res.longitude
					_this.reqData.Start_Pot = res.name || d.result.address_reference.landmark_l2.title
				}
			});
		},
		endLocation() {
			const _this = this
			uni.chooseLocation({
				async success(res) {
					let d = await _this.$util.getAddress({ longitude: res.longitude, latitude: res.latitude });
					_this.reqData.End_Lat = res.latitude
					_this.reqData.End_Lng = res.longitude
					_this.reqData.End_Pot = res.name || d.result.address_reference.landmark_l2.title
				}
			});
		},
		pickType(index, type) {
			this.skitype = index
			this.reqData.PlaceType = type
		},
		//文件上传
		async uploading(url, tempKey) {

			const r = await this.$upload(url, (pro) => {
				for (let i = 0; i < this.imgArr.length; i++) {
					if (this.imgArr[i].tempKey == tempKey) {
						this.imgArr[i].pro = pro;
					}
					
				}
				// this.imgArr.forEach((item) => {
				// 	if (item.tempKey == tempKey) {
				// 		item.pro = pro;
				// 	}
				// });
			});
			console.log(r,'r');
			for (let i = 0; i < this.imgArr.length; i++) {
				if (this.imgArr[i].tempKey == tempKey) {
					this.imgArr[i].netPath = r;
				}
			}
			this.$pv.closeLoad()
			// this.imgArr.forEach((item) => {
			// 	if (item.tempKey == tempKey) {
			// 		item.netPath = r;
			// 	}
			// });
			// this.reqData.Images.push(r)

		},
		upload() {
			let _this = this;
			let imglength = this.imgArr.length || 0
			uni.chooseMedia({
				count: 9-imglength,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				maxDuration: 30,
				camera: 'back',
				async success(res) {
					console.log(res,'res');
					for (let i = 0; i < res.tempFiles.length; i++) {
						// const base64Data = uni.getFileSystemManager().readFileSync( res.tempFiles[i].tempFilePath, 'base64')
						// // 鉴黄
						// let checkResult = await checkPornography(base64Data)
						// if(checkResult.data.conclusionType != 1) {
						// 	res.tempFiles.splice(i, 1);
						// 	this.isTip = true
						// 	continue
						// }
							let o = {
								duration: 0,
								fileType: res.tempFiles[i].fileType,
								tempUrl: res.tempFiles[i].tempFilePath,
								flieUrl: res.tempFiles[i].tempFilePath,
								tempKey: uni.$u.guid(8),
								pro: 0,
							};
						_this.imgArr.push(o);
						
						let rex = await _this.uploading(o.flieUrl, o.tempKey);
					}
					// res.tempFiles.forEach(async (item) => {
					

					// 	_this.imgArr.push(o);
						
					// 	let rex = await _this.uploading(o.flieUrl, o.tempKey);
					// });
				},
			});
		},
		selectImg_APP() {
			let _this = this;
			let imglength = this.imgArr.length || 0
			uni.showActionSheet({
				itemList: ['选择照片', '取消'],
				success: function (res) {
					if (res.tapIndex == 0) {
						let ind = 1;
						uni.chooseImage({
							// count:  允许上传的照片数量
							count: 9-imglength,
							// sizeType:  original 原图，compressed 压缩图，默认二者都有
							sizeType: ['original', 'compressed'],
							sourceType: ['album'],
							success(res) {
								res.tempFiles.forEach(async (item) => {
									let o = {
										duration: 0,
										fileType: 'image',
										tempUrl: item.path,
										flieUrl: item.path,
										tempKey: uni.$u.guid(8),
										pro: 0,
									};

									_this.imgArr.push(o);
									let rex = await _this.uploading(o.flieUrl, o.tempKey);
								});
							},
						});
						return;
					}
				},
				fail: function (res) { },
			});
		},
		delImg(i) {
			this.imgArr.splice(i, 1);
			// this.reqData.Images.splice(i, 1);
		},
		async showToast() {
			await this.playScoreAddAudio();
		},
		getPhoneNumber(e) {
			if (!this.reqData.Title) {
				this.$pv.msg('请填写主题');
				return false;
			}
			if (!this.reqData.ShopID && !this.ShopName) {
				this.$pv.msg('请选择场地');
				return false;
			}
			if (!this.reqData.ServerDate) {
				this.$pv.msg('请选择运动时间');
				return false;
			}
			if (!this.reqData.EndDate) {
				this.$pv.msg('请选择结束时间');
				return false;
			}
			if (!this.reqData.FeeRule) {
				this.$pv.msg('请选择买单方式');
				return false;
			}

			let _this = this;

			uni.login({
				provider: 'weixin',
				success: async (res) => {
					let d = {
						encryptedData: e.detail.encryptedData,
						code: res.code,
						aesIv: e.detail.iv
					};

					let res1 = await _this.$api.post('User/GetPhoneNumber', d);

					if (JSON.stringify(res1.data) != '') {
						let dd = {
							Phone: res1.data
						};

						let res2 = await _this.$api.post('User/BindMobile', dd);

						if (JSON.stringify(res2.data) == 'true') {
							_this.isPhoneNull = true;

							_this.reward.show = true;
						} else {
							_this.$pv.msg('绑定号码失败');
						}
					}
				},
				fail: (err) => {
					uni.showModal({
						content: '获取失败',
						showCancel: false
					});
				}
			});
		},

		openMsg() {
			// #ifdef MP-WEIXIN
			return new Promise((r, j) => {
				wx.requestSubscribeMessage({
					tmplIds: ['DPIDpGWLUduOH8cvHUYVnpSdt2zuZXghR-so3Sa4lcA', 'notKn8gsESYpHrQzjncHjGjvDHqG_6FmZAMEH_wCpTg'],
					success(re) {
						r(re);
					},
					fail(re) {
						j(re);
					}
				});
			});
			// #endif
			// #ifdef APP
			return true;
			// #endif
		},

		async sub() {
			if(this.tabInd == 1){
				const childValue = this.$refs.child.content
				this.reqData.Remark = childValue
			}
			if (this.reqData.FeeRule != '自行协商') {
				if(this.reqData.FeeRule == '价格区间'){
					if (!this.reqData.Commission ) {
						this.$pv.msg('请输入最小金额');
						return false;
					}
					if (!this.reqData.Commission_End ) {
						this.$pv.msg('请输入最大金额');
						return false;
					}
					if (!Number(this.reqData.Commission) && Number(this.reqData.Commission) !=0) {
						this.$pv.msg('请输入正确的数字');
						return false
					}
					if (!Number(this.reqData.Commission_End)) {
						this.$pv.msg('请输入正确的数字');
						return false
					}
					if (this.reqData.Commission < 0 ) {
						this.$pv.msg('金额必须大于0');
						return false;
					}
					if (this.reqData.Commission_End <=0 ) {
						this.$pv.msg('金额必须大于0');
						return false;
					}
					if(Number(this.reqData.Commission_End) <= Number(this.reqData.Commission)){
						this.$pv.msg('最大金额不得小于或等于最小金额');
						return false;
					}
				}else if(this.reqData.FeeRule == '付费' || this.reqData.FeeRule == '现场缴费'){
						if (!this.reqData.RegisterFee ) {
							this.$pv.msg('请输入金额');
							return false;
						}
						if (this.reqData.RegisterFee <= 0 ) {
							this.$pv.msg('金额必须大于0');
							return false;
						}
						if (!Number(this.reqData.RegisterFee)) {
							this.$pv.msg('请输入正确的数字');
							return false
						}
				}
				
			}

			if (!this.reqData.Title) {
				this.$pv.msg('请填写主题');
				return false;
			}
			if(this.tabInd == 0 || this.tabInd == 2){
				if (this.imgArr.length == 0) {
					this.$pv.msg('请至少添加一张图片');
					return false;
				}
			}
			if (!this.reqData.Remark) {
				this.$pv.msg('请填写备注');
				return false;
			}
			if (!this.reqData.PlaceType) {
				this.$pv.msg('请选择项目');
				return false;
			}
			if(this.tabInd == 0){
				if(!this.reqData.ServerDate){
					this.$pv.msg('请选择运动时间');
					return false;
				}
			}
			if(this.tabInd == 0){
				if(!this.reqData.EndDate){
					this.$pv.msg('请选择结束时间');
					return false;
				}
			}
			if (!this.reqData.ShopID && !this.ShopName) {
				this.$pv.msg('请选择场地');
				return false;
			}
			if(this.tabInd == 1 || this.tabInd == 2){
				if(!this.reqData.FeeRule){
					this.$pv.msg('请选择费用');
					return false;
				}
			}
			
			if (this.tabInd == 0) {
				if (!this.reqData.FeeRule) {
					this.$pv.msg('请选择买单方式');
					return false;
				}
			}
			if (!Number(this.reqData.PeopleNum)) {
				this.$pv.msg('人数不能为0');
				return false
			}
			if(this.reqData.PeopleNum <=0){
				this.$pv.msg('人数必须大于0');
				return false
			}
			if (!this.reqData.Phone) {
				this.$pv.msg('请填写电话号码');
				return false;
			}
			if (!Number(this.reqData.Phone) || this.reqData.Phone.length != 11) {
				this.$pv.msg('请输入正确的电话号码');
				return false;
			}
			if (!this.isPhone(this.reqData.Phone)) {
				this.$pv.msg('请输入正确的电话号码');
				return false;
			}
			if (!this.isRead) {
				this.$pv.msg('请先同意《发布须知》');
				return false;
			}
			// let str = this.$util.utf16ToEntities(this.reqData.Remark)
			// if (str.length > 200) {
			// 	this.reqData.Remark = str.slice(0, 200)
			// }
			// if(this.reqData.DateRule == '时间区间'){
			// 	if(this.startdate >this.enddate){
			// 		this.$pv.msg('结束时间不得小于开始时间');
			// 		return false;
			// 	}
			// }
			this.confirmSub()
			// this.reward.show = true;
			return;
		},

		// 有奖励
		async confirmSubReward() {
			// await this.openMsg();

			if (this.reqData.reward == 0) {
				this.confirmSub();
			} else {
				this.reqData.hasReward = true;
				const res = await this.checkUser();
				if (!res.data) {
					this.$pv.msg(res.message);
					return;
				}

				let pres = await this.$api.post('/Payment/PayV2', {
					EventID: res.data.AppointmentID,
					CompanyID: 6003,
					total_fee: this.total_reward,
					body: '发起球局',
					EventType: '球局奖励',
					SourcePage: 'ball_add',
					// #ifdef MP-WEIXIN
					PayChannel: 'weixin',
					// #endif
					// #ifdef APP
					PayChannel: 'app'
					// #endif
				});

				if (pres.data == 0) {
					//已余额支付成功
					this.$pv.msg('已为您发布');

					this.redirect_to('/pages/ball/ball_details?id=' + res.data.AppointmentID);

					return;
				}

				let payObj = JSON.parse(pres.data);

				uni.requestPayment({
					provider: 'wxpay',
					// #ifdef APP
					orderInfo: payObj,
					// #endif
					// #ifdef MP-WEIXIN
					timeStamp: payObj.timeStamp,
					nonceStr: payObj.nonceStr,
					package: payObj.package,
					signType: payObj.signType,
					paySign: payObj.paySign,
					// #endif
					success: async (r) => {
						this.$pv.msg('已为您发布球局');
						// await this.openMsg();
						this.redirect_to('/pages/ball/ball_details?id=' + res.data.AppointmentID);
					},
					fail: (err) => {
						this.$pv.msg('支付失败');
					}
				});
			}
		},

		// 无奖励
		async confirmSub() {
			this.reqData.hasReward = false;

			const res = await this.checkUser();
			if (res.data) {
				this.$pv.msg('发布成功');
				// await this.openMsg();
				// if(this.tabInd == 0){
				// 	this.redirect_to('/pages/ball/ball_list_user?index=0&title=一起挥管理')
				// }else if(this.tabInd == 1){
				// 	this.redirect_to('/pages/ball/ball_list_user?index=2&title=找私教管理')
				// }else{
				// 	this.redirect_to('/pages/ball/ball_list_user?index=1&title=招学员管理')
				// }
				uni.$emit('circleUpdate')
				this.redirect_to('/pages/ball/ball_details?id=' + res.data.AppointmentID);
				return;
			} else {
				this.$pv.msg(res.message);
				this.nav_back(1000);
			}
		},

		// 发布校验
		async checkUser() {
			this.$pv.load('正在处理');

			const rr = await this.subData();

			return rr;
		},

		async subData() {
			let obj = {
				UserID: uni.getStorageSync('user').UserID,
				Price: this.reqData.Price || 0
			};
			let arr = [obj];
			
			let data = JSON.parse(JSON.stringify(this.reqData))
			if(data.FeeRule != '付费'){
				data.IsPayRegisterFee = 0
				if(data.FeeRule !='现场缴费'){
					data.RegisterFee = 0
				}
			}
			if(this.tabInd == 0){
				// data.EndDate = data.ServerDate
				data.ServerDate = data.ServerDate + ' ' + data.ServerTime
				data.EndDate = data.EndDate + ' ' + data.EndTime
			}else{
				data.ServerDate = uni.$u.timeFormat(this.minDate, 'yyyy-mm-dd');
				data.EndDate = uni.$u.timeFormat(this.minDate, 'yyyy-mm-dd');
			}
			let newImageList = []
			for (let i = 0; i < this.imgArr.length; i++) {
				if(this.imgArr[i].netPath){
					newImageList.push(this.imgArr[i].netPath)
				}
			}
			// data.Images = data.Images.join(',')
			 data.Images = newImageList.join(',')

			data.Title = this.$util.utf16ToEntities(data.Title)
			data.Remark = this.$util.utf16ToEntities(data.Remark)
			
			
			//逆向地址解析
			let opt = `${data.Latitude},${data.Longitude}`
			let rex = await this.$util.getAddress(opt)
			data.City = rex.result.address_component.city
			 
			
			//this.reqData.Images = JSON.stringify(this.localList.map(item => item.netPath));
			let res = await this.$api.post('Appointment/Create', {
				...data,
				TeamID:this.cirID
				});

			//暂时隐藏star
			// await this.$im.createGroup({
			// 		groupID: res.data.AppointmentID,
			// 		groupName: "【" + this.reqData.Title + "】群聊",
			// 		groupAvatarUrl: this.user.HeadImgUrl,
			// 		userIDs: [],
			// 	})
			// await this.$im.sendCustomMessage({
			// 		conversationID: uni.$prefix + res.data.AppointmentID,
			// 		subType: 50,
			// 		conversationType: 2,
			// 		message: JSON.stringify({
			// 			id: res.data.AppointmentID
			// 		})
			// })
			//end

			//创建球局群聊，发起球局者是群聊群主
			// const groupID = res.data.AppointmentID.toString();
			// const groupInfo = {
			// 	groupID: groupID,
			// 	groupName: '【' + this.reqData.Title + '】群聊',
			// 	groupAvatarUrl: this.user.HeadImgUrl
			// };
			// const userIDs = [obj.UserID + '09'];
			// const config = {
			// 	groupNotice: '',
			// 	groupAttributes: {
			// 		key1: 'value1',
			// 		key2: 'value2'
			// 	}
			// };
			// const { groupAvatarUrl, groupID: imgrouoID, groupName } = groupInfo;
			// const gropdata = {
			// 	groupID: imgrouoID,
			// 	groupName,
			// 	groupAvatarUrl,
			// 	userIDs: [],
			// 	groupNotice: config.groupNotice,
			// 	groupAttributes: config.groupAttributes
			// };
			// 加入群聊的事件
			// console.log(gropdata, '----------gropdata');
			// await this.$im.createGroup(gropdata).then((d) => {
			// 	console.log(d, '创建群聊lllllllllll');
			// });
			// await this.$im.sendCustomMessage({
			// 	conversationID: uni.$prefix + imgrouoID,
			// 	subType: 50,
			// 	conversationType: 2,
			// 	message: JSON.stringify({
			// 		id: imgrouoID
			// 	})
			// });
			// 加入群聊的事件
			// await this.$im.createGroup(groupInfo, userIDs, config).then((d) => {
			// 	const textMsg = '欢迎来到我的雪撘子聚会';
			// 	this.$im.updateGroupAvatarUrl(this.user.HeadImgUrl, groupID);
			// 	this.$im.sendChatMessage(2, textMsg, groupID, this.isByte).then((d) => {});
			// });

			return res;
		},
		setGolfType(e) {
			this.reqData.PlaceType = e.value[0];
			this.showGolfType = false;
		},
		setcost(e){
			this.reqData.FeeRule = e.value[0];
			if(e.value[0] == '付费'){
				this.reqData.IsPayRegisterFee = 1
			}
			this.showcost = false
		},
		settimetype(e){
			this.reqData.DateRule = e.value[0];
			this.showtimetype = false
		},
		setmotion(e) {
			this.reqData.PlaceType = e.value[0];
			this.showmotion = false;
		},
		setFeeRule(e) {
			this.reqData.FeeRule = e.value[0];
			this.showApportion = false;
		},
		setPeopleNum(e) {
			this.reqData.PeopleNum = e.value[0];
		},
		setMinTime(e){
			// console.log(e);
			this.reqData.startTime = e.value
			this.showMinTime = false
		},
		setMaxTime(e){
			this.enddate =e.value
			let em = uni.$u.timeFormat(e.value, 'hh:MM');
			let n = ''
			let b = ''
			if (em.slice(3) > 30) {
				let time = Number(e.value) + (3600 * 1000)
				n = uni.$u.timeFormat(time, 'yyyy-mm-dd');
				b = uni.$u.timeFormat(time, 'hh:MM');
			} else {
				n = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				b = uni.$u.timeFormat(e.value, 'hh:MM');
			}
			if (b.slice(3) != 30) {
				let hm = b.split('')
				hm.splice(3, 1, '0')
				hm.splice(4, 1, '0')
				// console.log(hm, 'b');
				b = hm.join('')
			}
			this.reqData.EndDate = n;
			this.reqData.EndTime = b;
			// console.log(this.reqData.EndDate, this.reqData.EndTime.slice(3), 'this.reqData.ServerTime');
			this.showMaxTime = false
		},
		setTime(e,type) {
			this.startdate = e.value
			let em = uni.$u.timeFormat(e.value, 'hh:MM');
			let n = ''
			let b = ''
			console.log('em===>>',em);
			console.log('em===>>',em.slice(3));
			if (em.slice(3) > 30) {
				let time = Number(e.value) + (3600 * 1000)
				n = uni.$u.timeFormat(time, 'yyyy-mm-dd');
				b = uni.$u.timeFormat(time, 'hh:MM');
			} else {
				n = uni.$u.timeFormat(e.value, 'yyyy-mm-dd');
				b = uni.$u.timeFormat(e.value, 'hh:MM');
			}
			console.log('n===>>>》',n);
			console.log('b===>>>》',b);
			if (b.slice(3) != 30) {
				let hm = b.split('')
				hm.splice(3, 1, '0')
				hm.splice(4, 1, '0')
				b = hm.join('')
				console.log(b, 'b');
				
			}
			if(type=='start'){
				this.reqData.ServerDate = n;
				this.reqData.ServerTime = b;
				this.showTime = false;
			}
			if(type=='end'){
				this.reqData.EndDate = n;
				this.reqData.EndTime = b;
				this.showEndTime = false;
			}
			
			// console.log(this.reqData.ServerDate, this.reqData.ServerTime.slice(3), 'this.reqData.ServerTime');
		},
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`;
			}
			if (type === 'month') {
				return `${value}月`;
			}
			if (type === 'day') {
				return `${value}日`;
			}
			if (type === 'hour') {
				return `${value}时`;
			}
			if (type === 'minute') {
				return `${value}分  `;
			}
			return value;
		}
	},
	computed: {
		total_reward() {
			return this.reqData.PeopleNum * this.reqData.reward;
		},
		dateTime() {
			if (!this.reqData.ServerDate) {
				return '';
			} else {
				return this.reqData.ServerDate + ' ' + this.reqData.ServerTime;
			}
		},
		endTime(){
			if (!this.reqData.EndDate) {
				return '';
			} else {
				return this.reqData.EndDate + ' ' + this.reqData.EndTime;
			}
		},
		canChoose() {
		const list = this.motiontype;
		let num = 0;
		for (let i = 0; i < list.length; i++) {
			if (list[i].checked) {
			num++;
			}
		}
		let yesNo = num >= 3 ? false : true;
		return yesNo;
		},
		numChoose() {
		const list = this.motiontype;
		let num = 0;
		for (let i = 0; i < list.length; i++) {
			if (list[i].checked) {
			num++;
			}
		}
		return num;
		},
	}
};
</script>

<style lang="scss">
page {
	background-color: #F6F6F6;
}
.tranCanvas {
  width: 200vw;
  height: 200vh;
  opacity: 0;
  position: fixed;
  left: 0;
  top: 0;
  transform: translate(-200%, -200%);
  box-sizing: border-box;
}
.tip {
	padding-bottom: 20rpx;
	background: #fff;
	border-radius: 10rpx 10rpx 0 0;

	.tit {
		line-height: 90rpx;
		text-align: center;
		color: #333;
	}

	.txt {
		.c2 {
			color: #666;
		}
	}

	.mb30 {
		margin-bottom: 30rpx;
	}
}

.btm_tip {
	font-size: 28rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 10rpx;
}

.x-list {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	padding: 0 40rpx;

	.list-cell {
		width: 25%;
		height: 195rpx;
		border: 2rpx solid rgba(0, 0, 0, 0);
		display: flex;
		align-items: center;
		flex-direction: column;
		padding: 20rpx 0rpx 10rpx;
		border-radius: 16rpx;
		position: relative;

		&.list-active {
			border-radius: 16rpx;
			border: 2rpx solid #FD4C61;
		}

		.list-btn {
			width: calc(100% + 4rpx);
			height: 52rpx;
			color: #fff;
			background: #FD4C61;
			border-radius: 0rpx 0rpx 16rpx 16rpx;
			position: absolute;
			bottom: -2rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 24rpx;
		}

		.list-icon {
			width: 80rpx;
			height: 80rpx;
		}

		.list-name {
			background: linear-gradient(to right, #ff0000, #ffff00);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-size: 26rpx;
			margin-top: 8rpx;
		}

		.list-price {
			background: linear-gradient(to right, #ff0000, #ffff00);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			font-size: 22rpx;
			margin-top: 5rpx;
		}
	}
}

.popup {
	width: 650rpx;
	// height: 700rpx;
	border-radius: 20rpx;
	position: relative;

	.popup-bg {
		position: absolute;
		top: 0;
		width: 100%;
		height: 100%;
		display: block;
		z-index: -1;
	}

	.popup-title {
		display: flex;
		justify-content: center;

		.title-text {
			background-image: linear-gradient(135deg, #FFEACB, #F7B15C);
			font-size: 30rpx;
			font-weight: bold;
			color: #240E37;
			padding: 10rpx 30rpx;
			border-radius: 0 0 24rpx 24rpx;
		}
	}

	.popup-title-sub {
		display: flex;
		justify-content: center;
		margin-top: 10rpx;
		color: #a7a7ae;
		font-size: 26rpx;
	}

	.popup-close {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		right: 30rpx;
		top: 10rpx;
	}

	.popup-wrap {
		max-height: 800rpx;
		min-height: 300rpx;
		padding-top: 30rpx;
		padding-bottom: 20rpx;
	}

	.popup-btn {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 50rpx;

		&.-btn {
			justify-content: center;
		}

		.x-btn {
			width: 260rpx;
			height: 70rpx;
			border-radius: 60rpx;
			font-size: 28rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.btn-a {
			color: #f9d9a2;
			border: 4rpx solid #f9d9a2;
		}

		.btn-b {
			color: #6C250F;
			background-image: linear-gradient(to right, #FCEBC0, #F2B162);
		}
	}
}

.wrap {
	padding-bottom: 100rpx;
}

.group3 {
	border-bottom: 1rpx solid #E4E4E4;
	padding-bottom: 32rpx;

	.title_2 {
		color: #333333;
		font-size: 32rpx;
		margin-top: 32rpx;
		margin-bottom: 22rpx;
	}

	.typetitle {
		display: flex;

		.type {
			width: 148rpx;
			height: 56rpx;
			background-color: #F7F7F7;
			border-radius: 28rpx;
			text-align: center;
			line-height: 56rpx;
			color: #999999;
			font-size: 28rpx;
			margin-right: 16rpx;
		}

		.text {
			color: #fff;
			background-color: #0D0D0D;
		}
	}
}

.img_list {
	// padding-top: 30rpx;
	// border-bottom: 1rpx solid #E4E4E4;
	// box-sizing: border-box;
	padding-bottom: 32rpx;

	// padding: 26rpx 32rpx;
	.title {
		font-size: 30rpx;
	}

	image {
		width: 100%;
		height: 100%;
	}

	.img_box {
		display: flex;
		align-items: center;
		// justify-content: space-evenly;
		flex-wrap: wrap;
	}

	.videobox {
		padding: 32rpx;
		position: relative;

		>view {
			width: 100%;
			height: 300rpx;
			border-radius: 16rpx;
			overflow: hidden;

			video {
				width: 100%;
				height: 100%;
			}
		}

		.icon {
			position: absolute;
			right: 10rpx;
			top: 10rpx;
			width: 50rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// border-radius: 50%;
			z-index: 10;

			image {
				width: 40rpx;
				height: 40rpx;
				background: #fff;
				border-radius: 50%;
			}
		}
	}

	.img {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
		margin-right: 16rpx;
		margin-top: 16rpx;
		// overflow: hidden;
		position: relative;

		image {
			border-radius: 8rpx;
		}

		.icon {
			position: absolute;
			right: -20rpx;
			top: -14rpx;
			width: 50rpx;
			height: 50rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			// border-radius: 50%;
			z-index: 10;

			image {
				width: 40rpx;
				height: 40rpx;
				background: #fff;
				border-radius: 50%;
			}
		}
	}

	.img:nth-child(3n) {
		margin-right: 0;
	}

	.addimg {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #F6F6F6;

		image {
			width: 80rpx;
			height: 80rpx;
		}
	}
}

.platitle {
	font-size: 32rpx !important;
	font-weight: 500;
	color: #C2C2C2;
}

.remtext {
	font-size: 28rpx !important;
	color: #C2C2C2 !important;
	font-weight: 500 !important;
}

.input-placeholder {
	font-size: 28rpx;
	font-weight: 500 !important;
	color: #C2C2C2 !important;
}

.pb100 {
	padding-bottom: 100rpx;
}

.ball_space {
	input {
		flex: 1;
	}

	.sele {
		margin-left: 16rpx;
		background: linear-gradient(180deg, #fef0bc 0%, #b98b51 100%);
		text-align: center;
		color: #4c310c;
		font-weight: bold;
		padding: 2rpx 10rpx;
		border-top: 100%;

		position: relative;
	}
}

.reward_content {
	padding: 20rpx 30rpx;

	.title {
		text-align: center;
		font-weight: 600;
		margin: 20rpx 0 40rpx 0;
	}

	.btn {
		margin: 60rpx 0 30rpx 0;

		.btontt {
			border: none;
			outline: none;
			border-radius: 110rpx;
			color: #ffffff;
		}
	}

	.c_btn {
		text-align: center;
		margin: 20rpx 0;
	}

	.group {
		border-bottom: 1px solid #e4e4e4;
		.lab {
			padding-right: 10rpx;
			color: black;
			font-size: 32rpx;
		}

		.inp_box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			justify-content: flex-end;

			>view {
				display: flex;
			}

			.total_reward {
				font-size: 28rpx;
				color: rgb(156, 156, 156);
				margin-top: 16rpx;
			}
		}

		.uni_icon {
			width: 40rpx;
			height: 40rpx;
		}
	}

	view {
		color: black;
	}
}

.title {
	padding: 20rpx 0 10rpx;
	margin-left: 30rpx;
	font-size: 36rpx;
	line-height: 60rpx;
}

.bg {
	margin-top: 20rpx;
	// background: #202020;
	border-radius: 16rpx;
	font-weight: bold;

	// padding: 0 32rpx;
	// background-color: #fff;
	.topbox {
		background-color: #fff;
		padding-left: 32rpx;
	}

	.bottombox {
		margin-top: 16rpx;
		background-color: #fff;
		padding: 0 32rpx 0 34rpx;
		box-sizing: border-box;
	}
}

.inp_box {
	// border-bottom: 1rpx solid #E4E4E4;
	height: 96rpx;
	padding-top: 24rpx;
	box-sizing: border-box;
	position: relative;
	.count {
			position: absolute;
			bottom: 3rpx;
			right: 15rpx;
			font-size: 24rpx;
			color: #C2C2C2;
	}
}

.group {
	display: flex;
	align-items: center;
	height: 104rpx;
	border-bottom: 1rpx solid #E4E4E4;
	// border-bottom: 1px solid #e4e4e4;
	// margin-left: 30rpx;
	// margin-right: 30rpx;

	&:last-child {
		// border-bottom: none;
	}
	.text5{
			font-size: 28rpx;
			font-weight: 500;
			color: #333333;
		}
		.text6{
			font-size: 28rpx;
			font-weight: 500;
			color: #C2C2C2;
		}
		.unit{
			// height: 40rpx;
			color: #333333;
			font-weight: 500;
			font-size: 28rpx;
			// border-right: 1rpx solid #C2C2C2;
			padding-right: 10rpx;
			margin-right: 10rpx;
		}
	.lab {
		padding-right: 10rpx;
		color: #333333;
		font-size: 32rpx;
		font-weight: 500;
	}

	.inp_box {
		flex: 1;

		input {
			width: 100%;
			color: #333333;
			text-align: right;
			font-weight: 500;
		}
	}

	.icon_box {
		height: 40rpx;
		width: 40rpx;
		line-height: 40rpx;
	}
}

.group2 {
	.lab {
		color: #fef0bc;
	}

	.inp_box {
		input {
			color: #fef0bc;
		}

		.input-placeholder {
			// color: #FEF0BC;
			color: rgba(254, 240, 188, 0.6);
		}
	}
}

.group_textarea {
	height: 264rpx;
	margin-top: 30rpx;
	// background-color: #fff;
	// padding-left: 32rpx;
	// text-indent: 2em;
	box-sizing: border-box;
	position: relative;

	.count {
		position: absolute;
		bottom: 15rpx;
		right: 15rpx;
		font-size: 24rpx;
		color: #C2C2C2;
	}
	/deep/ .u-textarea {
		background: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
		border-bottom: none !important;
		padding: 0 !important;
		height: 100% !important;
		text-indent: 2em;
	}

	/deep/ .u-textarea__count {
		background: none !important;
		color: #0d0d0d !important;
	}

	/deep/ .u-textarea__field {
		color: #0d0d0d !important;
		font-size: 28rpx !important;
		height: 100% !important;
	}
}

.mt30 {
	margin-top: 30rpx;
}

/deep/ .u-radio-group--row {
	justify-content: flex-end;
}

/deep/ .u-radio {
	margin-right: 20rpx;
	height: 80rpx;
}

.tip {
	margin-top: 20rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	color: #ef4034;
}
.createbox{
	width: 100%;
	height: 196rpx;
	position: relative;
}
.create_ball_btn {
	width: 100%;
	height: 196rpx;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: #fff;
	z-index: 2;
	.btn {
		width: 670rpx;
		height: 88rpx;
		border-radius: 44rpx;
		margin: 10rpx auto;
		margin-bottom: 5rpx;
		text-align: center;
		line-height: 88rpx;
		background-color: #000000;
	}
}

.sporttext {
  font-size: 36rpx;
  color: #0d0d0d;
  font-weight: bold;
  padding-left: 84rpx;
  padding-top: 35rpx;
  background: white;
  border-radius: 18rpx 18rpx 0 0;
  .maxtag{
	font-size: 28rpx;
	font-weight: bold;
	color: #333333;
  }
}
.sportbox {
  width: 700rpx;
  padding: 58rpx;
  background: white;
  border-radius: 0 0 18rpx 18rpx;
  display: flex;
  flex-wrap: wrap;
  .sport {
    width: 152rpx;
    height: 72rpx;
    border-radius: 8rpx;
    background-color: #f7f7f7;
    text-align: center;
    line-height: 72rpx;
    color: #333333;
    font-size: 28rpx;
    margin-left: 24rpx;
    margin-bottom: 24rpx;
  }
  .text4 {
    color: #fff !important;
    background-color: #000000 !important;
  }
}
</style>
